<template>
  <div id="cart">
    <header>
      <div class="left" @click="gb">
        <i>&lt;</i>
        <span>返回</span>
      </div>

      <h1>购物车</h1>
    </header>
    <main>
      <div class="orders">
        <!-- <ul class="good">
          <li class="sel">
            <input type="checkbox" name id />
          </li>
          <li class="goodimg">
            <img src="../images/img_15537573719009.jpg" alt />
          </li>

          <li class="num">
            <p class="numinput">
              <input class="fl addbtn" type="button" value="-" />
              <input class="fl gnum" type="text" value="1" />
              <input class="fl reddbtn" type="button" value="+" />
            </p>

            <p class="price">￥499</p>
          </li>
          <li class="delicon"></li>
        </ul>-->

        <ul class="good" v-for="item in cartList" :key="item.oid">
          <li class="sel">
            <input type="checkbox" v-model="item.issel" name id />
          </li>
          <li class="goodimg">
            <img :src="item.gimgurl" alt />
          </li>

          <li class="num">
            <p class="numinput">
              <input
                class="fl addbtn"
                type="button"
                value="-"
                @click="item.qty<=1?'':changeQty(item.oid,item.qty,'dec')"
              />
              <input
                class="fl gnum"
                type="text"
                v-model.number="item.qty"
                @change="item.qty<=1?item.qty=1:item.qty;item.qty>=10?item.qty=10:item.qty"
              />
              <input
                class="fl reddbtn"
                type="button"
                value="+"
                @click="changeQty(item.oid,item.qty,'add')"
              />
            </p>

            <p class="price">{{item.gprice}}</p>
          </li>
          <li class="delicon" @click="removeGood(item.oid)"></li>
        </ul>
      </div>

      <div class="money">
        <p class="total">
          应付金额：￥
          <i>{{totalPrice}}</i>
        </p>
        <p>
          <a href="###">
            去结算
            <i>({{alllength}})</i>
          </a>
        </p>
      </div>
    </main>
  </div>
</template>

<script>
import Qs from "qs";
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      // cartList: []
      uid: null
    };
  },
  computed: {
    cartList() {
      return this.$store.state.cart.cartlist;
    },
    // 总价
    totalPrice() {
      return this.$store.getters.allprice;
    },
    alllength() {
      return this.$store.getters.alllength;
    }
  },
  methods: {
    removeGood(oid) {
      // let isok = confirm("确定删除？");
      // if (isok) {
      //   this.$store.commit("removeItem", oid);

      //   // 删除数据库
      //   let url = `http://119.23.142.232:11291/cart/${oid}`;
      //   let {
      //     data: { data }
      //   } = await this.$axios.delete(url);
      //   // window.console.log(data.deletedCount);
      //   if (data.deletedCount) {
      //     alert("删除成功！");
      //   }
      // }

      MessageBox.confirm("确定删除?")
        .then(async () => {
          this.$store.commit("removeItem", oid);
          // 删除数据库
          let url = `http://119.23.142.232:11291/cart/${oid}`;
          let {
            data: { data }
          } = await this.$axios.delete(url);
          // window.console.log(data.deletedCount);
          if (data.deletedCount) {
            MessageBox("提示", "删除成功");
          }
        })
        .catch(() => {});
    },
    async changeQty(oid, qty, type) {
      let datastr = "";
      if (type == "add") {
        let newqty = qty * 1 + 1;
        datastr = Qs.stringify({
          qty: newqty
        });
        this.$store.commit("addqty", oid);
      } else if (type == "dec") {
        let newqty = qty - 1;
        if (newqty <= 1) {
          newqty = 1;
        }
        datastr = Qs.stringify({
          qty: newqty
        });
        this.$store.commit("decqty", oid);
        // window.console.log(666);
      }
      // 更新数据库
      let url = `http://119.23.142.232:11291/cart/${oid}`;
      await this.$axios.put(url, datastr, {
        headers: { "Content-Type": "application/x-www-form-urlencoded" }
      });
    },
    gb() {
      this.$router.back();
    }
  },
  async created() {
    let nowuname = JSON.parse(localStorage.getItem("authorization"));
    // window.console.log(nowuname);
    let { username } = nowuname;
    // window.console.log(username);
    let nowuid = await this.$axios.get(
      "http://119.23.142.232:11291/usersnew/getuid/",
      {
        params: { name: username }
      }
    );
    this.uid = nowuid.data.data[0].uid;
    // 订单列表;
    // let uid = 1;
    let {
      data: { data }
    } = await this.$axios.get("http://119.23.142.232:11291/cart", {
      params: { uid: this.uid }
    });

    data.forEach(item => {
      item.issel = Boolean(parseInt(item.issel));
      // window.console.log(item.issel);
    });
    // window.console.log(data);
    this.$store.state.cart.cartlist = data;
  }
};
</script>

<style>
html,
body {
  height: 100%;
  width: 100%;
}
#cart {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#cart a {
  text-decoration: none;
}

#cart header {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: left;
  height: 1.04rem;
  line-height: 1.04rem;
  border-bottom: 0.026667rem solid #e5e5e5;
}

#cart header .left {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 0.333333rem;
  width: 1.6rem;
}

#cart header i,
#cart header span,
#cart header h1 {
  font-size: 0.4rem;
}

#cart header i {
  font-size: 0.533333rem;
  font-weight: bold;
}

#cart header h1 {
  width: 100%;
  text-align: center;
}

#cart main {
  flex: 1;
  overflow-y: scroll;
  background: #f6f6f6;
}

#cart main .orders {
  margin-top: 0.266667rem;
}

#cart main .orders .good {
  background: #fff;
  display: flex;
  flex-direction: row;
  margin-bottom: 0.026667rem;
  height: 2.72rem;
  align-items: center;
}

#cart main .orders .good .sel {
  margin: 0 0.24rem;
}

#cart main .orders .good .goodimg {
  width: 2.133333rem;
  height: 2.133333rem;
  border: 0.026667rem solid #d4d3d3;
}

#cart main .orders .good .goodimg img {
  width: 100%;
  height: 100%;
  border-radius: 0.026667rem;
}

#cart main .orders .good .num {
  margin: 0 3.066667rem 0 0.24rem;
}

#cart main .orders .good .num .numinput {
  height: 0.8rem;
  line-height: 0.8rem;
}

#cart main .orders .good .num .addbtn,
#cart main .orders .good .num .reddbtn {
  width: 0.8rem;
  height: 0.8rem;
  line-height: 0.746667rem;
  background: #f0f0f0;
  color: #7d7d7d;
  font-size: 0.48rem;
  font-weight: bold;
  border: 0.026667rem solid #dddddd;
  border-radius: 0.053333rem 0 0 0.053333rem;
}

#cart main .orders .good .num .reddbtn {
  background: #fff;
  border-radius: 0 0.053333rem 0.053333rem 0;
}

#cart main .orders .good .num .gnum {
  width: 0.933333rem;
  height: 0.746667rem;
  font-size: 0.213333rem;
  text-align: center;
  background: #fff;
  color: #000;
  border-top: 0.026667rem solid #dddddd;
  border-bottom: 0.026667rem solid #dddddd;
}

#cart main .orders .good .num .price {
  margin-top: 0.64rem;
}

#cart main .orders .good .delicon {
  width: 0.8rem;
  height: 0.8rem;
  background: url(../images/del.png) no-repeat;
  background-size: 100%;
}

#cart main .money {
  margin-top: 0.533333rem;
  border-top: 0.026667rem solid #d4d4d4;
  padding-top: 0.266667rem;
  text-align: center;
  font-size: 0.373333rem;
}

#cart main .money a {
  width: 80%;
  height: 1.333333rem;
  font-size: 0.453333rem;
  line-height: 1.333333rem;
  margin: 0.266667rem auto;
  display: block;
  color: #fff;
  background: #000;
}
</style>